<template>
  <div>
    <!-- 搜索 -->
    <el-card class="marginBom">
      <!-- 
        **
          show：为true时，显示搜索栏部分
          isAdvance：为true时，显示高级搜索的部分
        **
      -->
      <div class="disflex" v-if="searchForm.show">
        <el-form :model="searchForm" ref="searchForm">
          <!-- 
            **
              baseSearchList：非高级搜索部分的数组
                {
                  label：搜索栏对应的标签文本
                  prop：搜索栏对应的字段
                  width：表单标签文本宽度
                }
            **
          -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            :label-width="item.width?item.width:'60px'"
            v-for="item in searchForm.baseSearchList"
            :key="item.prop"
            class="fl"
            style="margin-right:20px;"
          >
            <div v-if="item.com==='input'">
              <!-- 
                **
                  inputType: input对应的type，如text,password。默认为text
                  style: input的自定义样式
                **
              -->
              <el-input
                :type="item.inputType"
                v-model="searchForm[item.prop]"
                class="maxWidth"
                clearable
                :style="item.style"
                @keydown.enter.native="searchEnter"
              ></el-input>
            </div>
            <div v-else-if="item.com==='select'">
              <!-- 
                **
                  filterable: 下拉框是否可搜索
                  style: 自定义样式
                  options：下拉框选项数组
                  propvalue：下拉选项的value值
                  propLabel：下拉选项的label值
                **
              -->
              <el-select
                v-model="searchForm[item.prop]"
                class="maxWidth"
                :style="item.style"
                clearable
                :filterable="item.filterable"
                @keydown.enter.native="searchEnter"
              >
                <el-option
                  v-for="itemSelect in item.options"
                  :key="itemSelect[item.propvalue]"
                  :label="itemSelect[item.propLabel]"
                  :value="itemSelect[item.propvalue]"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <div v-if="searchForm.isAdvance">
            <!-- 
              **
                advanceSearchList：高级搜索部分的数组
              **
            -->
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :label-width="item.width?item.width:'90px'"
              v-for="item in searchForm.advanceSearchList"
              :key="item.prop"
              class="fl"
              :style="item.style"
            >
              <div v-if="item.com==='input'">
                <el-input
                  :type="item.inputType"
                  v-model="searchForm[item.prop]"
                  class="maxWidth"
                  :style="item.style"
                  clearable
                  @keydown.enter.native="searchEnter"
                ></el-input>
              </div>
              <div v-else-if="item.com==='select'">
                <el-select
                  v-model="searchForm[item.prop]"
                  class="maxWidth"
                  :style="item.style"
                  clearable
                  :filterable="item.filterable"
                  @keydown.enter.native="searchEnter"
                >
                  <el-option
                    v-for="itemSelect in item.options"
                    :key="itemSelect[item.propvalue]"
                    :label="itemSelect[item.propLabel]"
                    :value="itemSelect[item.propvalue]"
                  ></el-option>
                </el-select>
              </div>
              <div v-else-if="item.com==='cascader'">
                <!-- 
                  **
                    style: 自定义样式
                    options：级联选项数组
                    props：级联的props，包括value,label等，具体看element官网
                  **
                -->
                <el-cascader
                  v-model="searchForm[item.prop]"
                  class="maxWidth"
                  :style="item.style"
                  :options="item.options"
                  :props="item.props"
                  clearable
                ></el-cascader>
              </div>
              <div v-else-if="item.com==='date'">
                <!-- 
                  **
                    type：日期选择器的类型
                    rangeSeparator：区间选择的中间字
                    startPlaceholder：区间选择的开始描述
                    endPlaceholder：区间选择的结束描述
                    defaultTime：时间的默认时间区间
                  **
                -->
                <el-date-picker
                  v-model="searchForm[item.prop]"
                  :type="item.type?item.type:'daterange'"
                  :style="item.style"
                  :range-separator="item.rangeSeparator?item.rangeSeparator:'至'"
                  :start-placeholder="item.startPlaceholder?item.startPlaceholder:'开始'"
                  :end-placeholder="item.endPlaceholder?item.endPlaceholder:'结束'"
                  :default-time="item.defaultTime?item.defaultTime:['00:00:00','23:59:59']"
                  clearable
                ></el-date-picker>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div v-if="searchForm.show">
          <div class="disflex">
            <el-button type="primary" @click="toSearch" class="btnWidth">
              <i class="el-icon-search"></i>
              查询
            </el-button>
            <el-button
              v-if="searchForm.isAdvance"
              type="primary"
              @click="advanceSearch"
              class="btnWidth"
            >{{searchForm.advance?"高级搜索":"收起高级"}}</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <!-- 操作栏 -->
      <div class="marginBom fr">
        <div class="disflex">
          <div v-if="handleBtn">
            <!-- 
              **
                handleBtn：操作栏数组
                label：操作名称
                type：操作按钮类型
              **
            -->
            <el-button
              class="btnWidth"
              @click="toHandle(item)"
              v-for="item in handleBtn"
              :key="item.label"
              :type="item.type"
              :style="item.style"
            >{{item.label}}</el-button>
          </div>
        </div>
      </div>
      <!-- 表格部分 -->
      <!-- 
        **
          tableData：表格数组
          loading：表格loading
          load：懒加载触发方法
          treeProps：树形懒加载对应的props
        **
      -->
      <el-table
        ref="multipleTable"
        :header-cell-style="minTable.headerStyle?minTable.headerStyle:{background:'#F4F7FB'}"
        :data="minTable.tableData"
        style="width: 100%;"
        v-loading="minTable.loading"
        row-key="id"
        :load="load"
        lazy
        :tree-props="minTable.treeProps"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <template v-for="colItem in cols">
          <!-- 按钮 -->
          <template v-if="colItem.type==='btn'">
            <el-table-column
              :label="colItem.label"
              :key="colItem.type"
              :width="colItem.width"
              :fixed="colItem.fixed"
              :align="colItem.align"
            >
              <template slot-scope="scope">
                <div class="disflex">
                  <!-- 
                    **
                      operatTitle：操作按钮名称
                      size：按钮规格
                      type：按钮类型
                      showPop：是否是悬浮显示按钮名称
                      iconName：按钮图标
                    **
                  -->
                  <div v-for="btnItem in colItem.btnData" :key="btnItem.operatTitle">
                    <!-- 其他操作（删、改、查、下载等） -->
                    <el-button
                      :size="btnItem.size?btnItem.size:'mini'"
                      :type="btnItem.type"
                      @click="handleOperator(scope.$index, scope.row,btnItem.operatTitle)"
                      :style="btnItem.style"
                      style="margin-right:10px;"
                    >
                      <!-- 显示图标与操作按钮名称 -->
                      <span v-if="!btnItem.showPop">
                        <i
                          class="icon-menu-item"
                          :class="'iconfont icon' + btnItem.iconName"
                          v-if="btnItem.iconName"
                          style="margin-right:4px;"
                        ></i>
                        {{btnItem.operatTitle}}
                      </span>
                      <!-- 只显示操作图标，不显示操作名称 -->
                      <span v-if="btnItem.showPop">
                        <el-tooltip
                          v-if="btnItem.showPop"
                          effect="dark"
                          :content="btnItem.operatTitle"
                          placement="top"
                        >
                          <i
                            class="icon-menu-item"
                            :class="'iconfont icon' + btnItem.iconName"
                            v-if="btnItem.iconName"
                            style="margin-right:4px;"
                          ></i>
                        </el-tooltip>
                      </span>
                    </el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
          </template>
          <!-- 可勾选 -->
          <template v-else-if="colItem.type==='selection'">
            <el-table-column
              type="selection"
              :key="colItem.type"
              :width="colItem.width"
              :align="colItem.align"
              :fixed="colItem.fixed"
            ></el-table-column>
          </template>
          <!-- 可排序 -->
          <template v-else-if="colItem.type==='index'">
            <el-table-column
              type="index"
              :key="colItem.type"
              :width="colItem.width"
              :align="colItem.align"
              :prop="colItem.prop"
              :fixed="colItem.fixed"
            ></el-table-column>
          </template>
          <!-- 其他 -->
          <!-- 
            **
              prop：表头字段
              label：表头名称
              width：表格列的宽度
              sortable：是否排序
              fixed：是否固定，固定在左侧还是右侧
              align：居中，居左，居右
            **
          -->
          <template v-else>
            <el-table-column
              show-overflow-tooltip
              :key="colItem.prop"
              :label="colItem.label"
              :width="colItem.width"
              :sortable="colItem.sortable"
              :min-width="colItem.minwidth"
              :fixed="colItem.fixed"
              :align="colItem.align?colItem.align:'left'"
              :prop="colItem.prop"
            ></el-table-column>
          </template>
        </template>
      </el-table>
      <!-- 分页 -->
      <div class="table-page" v-if="pageInfo.show">
        <!-- 
            **
              show：是否展示分页
              currentPage：当前页码
              pageSizes：分页区间
              pageSize：每页多少条
              layout：分页布局
              total：总数
            **
        -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="pageInfo.currentPage?pageInfo.currentPage:1"
          :page-sizes="pageInfo.pageSizes?pageInfo.pageSizes:[10, 20, 100, 200]"
          :page-size="pageInfo.pageSize?pageInfo.pageSize:10"
          :layout="pageInfo.layout?pageInfo.layout:'total, sizes, prev, pager, next,slot'"
          :total="pageInfo.total?pageInfo.total:0"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "min-table",
  props: {
    // 大表格属性配置
    minTable: {
      default: () => ({
        tableData: []
      })
    },
    // 表头数据
    cols: {
      default: Array
    },
    // 操作栏按钮数组
    handleBtn: {
      default: Array
    },
    // 查询表单
    searchForm: {
      default: Object
    },
    // 分页
    pageInfo: {
      default: Object
    }
  },
  data() {
    return {};
  },
  methods: {
    // 查询
    toSearch() {
      this.$emit("min-search");
    },
    // 高级查询按钮
    advanceSearch() {
      this.$emit("advance-search");
    },
    // 回车查询
    searchEnter(e) {
      this.$emit("min-search-enter", e);
    },
    // 表格按钮操作
    handleOperator(index, row, operatTitle) {
      this.$emit("min-operator", index, row, operatTitle);
    },
    // 操作栏
    toHandle(i) {
      this.$emit("min-handle", i);
    },
    // 树形懒加载
    load(tree, treeNode, resolve) {
      this.$emit("min-load", tree, treeNode, resolve);
    },
    // 单选事件
    handleSelect(selection, row) {
      this.$emit("min-select", selection, row);
    },
    // 多选事件
    handleSelectAll(selection) {
      this.$emit("min-select-all", selection);
    },
    // 分页相关事件
    handleSizeChange(val) {
      this.$emit("min-size", val);
    },
    handlePageChange(val) {
      this.$emit("min-page", val);
    }
  }
};
</script>
<style scoped>
</style>
